 //跳转登录
    
 const index=localStorage.index;
 const oBox = document.querySelector('.container');
 const oUls = oBox.querySelectorAll('ul');
 let num=10;
 let start=0;
 let i=0;




 $('[name="login"]').click(function(){
   window.location.href=`./login.html?url=${window.location.href}`;
 })
 $('[name="logout"]').click(function(){
   const cookieObj=myGetCookie();
   if (cookieObj.login === '1' ) {
     console.log(cookieObj.login);
     //证明已经登陆过
     //设定login
     mySetCookie('login',0,-1,'/');
     window.alert('您已经退出登录了');
   }else{
     //还没登录过
     window.alert('您还没有登录，请您先登录')
   }
 });
 //跳转购物车
 $('[name="cart"]').click(function(){
   console.log('111');
         const cookieObj=myGetCookie();
   if (cookieObj.login === '1') {
     window.location.href='./cart.html';
   }else{
     if (window.confirm('您还没有登录，点击确定跳转登录页面')) {
       window.location.href=`./login.html?url=${window.location.href}`;
     }
   }

 })
 //点击商品分类页面
 //跳转商品列表页  同时携带商品分类参数
 //键名是cat_one_id  键值是标签内容
 $('[name="1"]').click(function(){
   window.location.href=`./list.html?cat_one_id=${$(this).html()}`
 
 })
 setPage();

 window.addEventListener( 'scroll' , function(){

         // 获取 页面上卷高度 
         let top = document.documentElement.scrollTop;

         // 获取 视窗窗口高度
         let height = document.documentElement.clientHeight;

         // 设定预留高度 根据实际项目设定 网速快就小一些
         let h = 200;

         //  获取最矮ul标签对象
         //  最矮ul标签的占位是 标签对象.offsetHeight
         let min = oUls[0];

         oUls.forEach( item => {
             if( min.offsetHeight > item.offsetHeight ){
                 min = item;
             }
         })
         
         // 判断
         // 上卷高度 + 视窗高度 + 预留高度 > 最矮ul高度 
         if( top + height + h > min.offsetHeight ){
             // 再次调用函数 发送请求 动态生成页面
             setPage();
         }

     })


 function setPage(){
 
    let min = oUls[0];
   const xhr=myPromiseJQueryAjax('../server/goods_index.php','get',{num:num,start:start},'json');
   i++;
   start=num*i;
   console.log(start);
   console.log(xhr);

   xhr.then(function(res){
     console.log(res);
     let str='';
     res.forEach(function(item){
       str += `
       <li class="list-item">
     <div class="panel panel-primary">
       <div class="panel-body">
         <ol class="breadcrumb">
           <li><a href="#">${item.cat_one_id}</a></li>
           <li><a href="#">${item.cat_two_id}</a></li>
           <li class="active">${item.cat_three_id}</li>
         </ol>
       </div>
       <div class="panel-footer">
         <div class="row">
           <div class="">
             <div class="thumbnail">
               <img src="${item.goods_big_logo}" alt="...">
               <div class="caption">
                 <h3>${item.goods_name}</h3>
                 <p>
                   <i class="glyphicon glyphicon-yen"></i>
                   <span>${item.goods_price}</span>
                 </p>
                 <p class="hh"><a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a></p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </li>
       `

        // 查询最矮ul标签对象
                   // 默认 第一个标签是最矮的ul标签对象
            let min = oUls[0];
            // 循环遍历所有的ul标签对象
            // item中存储的就是 ul标签对象
            oUls.forEach( item => {
                if( min.offsetHeight > item.offsetHeight ){
                    // min 变量中 存储 item的标签对象
                    min = item;
                }
            })
            min.innerHTML += str;

     
      
     })
   })
 }



 //轮播图
 const imgArr = [
         {id:1,size:'29.7KB',width:500,height:333,name:'1.jpg'},
         {id:2,size:'19.3KB',width:500,height:333,name:'2.jpg'},
         {id:3,size:'17.1KB',width:500,height:333,name:'3.jpg'},
         {id:4,size:'20.3KB',width:500,height:333,name:'4.jpg'},
         {id:5,size:'320KB',width:600,height:400,name:'5.jpg'},
     ];

       // 获取标签对象 
        const oBanner = document.querySelector('.banner');

        // 面向对象编程
        // 调用构造函数 创建 轮播图 实例化对象
        const bannerObj = new setBanner( oBanner , imgArr );
        console.log( bannerObj );

        // 通过实例化对象 调用 构造函数prototype中定义的函数方法
        // bannerObj.setPage();
        // bannerObj.autoLoop();
        // bannerObj.setMouse();
        // bannerObj.setClick();
        // bannerObj.hid();

        // 只需要调用一个 入口函数 init 就可以了
        // 效果 类似于 一键启动所有
                            // let looked = localStorage.looked;
                            // console.log("looked=",looked);
                            // const looked = JSON.parse( localStorage.looked );
        bannerObj.init();
       


    